(function () {
    var paper,
        midObj = {},
        $win = $(window),
        winHt = $win.height() - 6,
        winWt = $win.width(),
        mq = {
            fontSize: 24,
            numFtSize: 30,
            currentWeek: "Current\nWeek",
            gridWidth: 205,
            devWidth: 140,
            gapWidth: 2,
            gapHeight: 2
        },
        legendWt = 136,
        progressTimeHandle,
        timeHandle,
        loopTimeSpan = 15000,
        svgTableDict = {},
        totalValDict = {},
        lineRateCache = {},
        legDict = {
            'production end': {color: '#000000'},
            'cleaning scheduled': {color: '#ddd9c4', text: ['cleaning', 'scheduled']},
            'maintanance scheduled': {color: '#a6a6a6', text: ['maintanance', 'scheduled']},
            'sample production': {color: '#006600', text: ['sample', 'production']},
            'testproduction': {color: '#009900', text: ['test', 'production']},
            'setting': {color: '#8db4e2'},
            'parts shortage': {color: '#e6b8b7'},
            'outlet occupied': {color: '#60497a', text: ['outlet', 'occupied']},
            'manpower shortage': {color: '#963634', text: ['manpower', 'shortage']},
            'standstill by external machine': {color: '#632523', text: ['standstill by', 'external machine']},
            'error production': {color: '#a50021', text: ['error', 'production']},
            'error maintenance': {color: '#cc0066', text: ['error', 'maintenance']},
            'tool breakage': {color: '#ff3300'},
            'quality problem, testing': {color: '#9900cc', text: ['quality problem', ', testing']},
            'disturbance by pollution': {color: '#cc99ff', text: ['disturbance by', 'pollution']},
            'conveyor': {color: '#ffff00'},
            'error robot': {color: '#0000ff'},
            'production': {color: '#00ff00'},
            'automatic breakdown': {color: '#cc0000', text: ['automatically', 'breakdown']},
            'system failure': {color: '#cc0000'},
            'congestion goods': {color: '#ffc000', text: ['congestion', 'goods']}
        };
    if(winHt < 1000) {
        mq['fontSize'] = 16;
        mq['currentWeek'] = 'Current Week';
        mq['gridWidth'] = 143;
        mq['devWidth'] = 100;
        mq['gapWidth'] = 5;
        mq['gapHeight'] = 5;
        mq['numFtSize'] = 20;
    }
    var gridRowNum = 3,
        gridColNum = 2,
        envDict = {
            'RM10': {
                graphData: [{
                    x: 138,
                    y: 112,
                    width: 70,
                    height: 60
                }, {
                    x: 138,
                    y: 127,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 138,
                    y: 159,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM20': {
                graphData: [{
                    x: 245,
                    y: 112,
                    width: 70,
                    height: 60
                }, {
                    x: 245,
                    y: 127,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 245,
                    y: 159,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM30': {
                graphData: [{
                    x: 478,
                    y: 112,
                    width: 70,
                    height: 60
                }, {
                    x: 478,
                    y: 127,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 478,
                    y: 159,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM40': {
                graphData: [{
                    x: 586,
                    y: 112,
                    width: 70,
                    height: 60
                }, {
                    x: 586,
                    y: 127,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 586,
                    y: 159,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM50': {
                graphData: [{
                    x: 1023,
                    y: 112,
                    width: 70,
                    height: 60
                }, {
                    x: 1023,
                    y: 127,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1023,
                    y: 159,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM60': {
                graphData: [{
                    x: 1130,
                    y: 112,
                    width: 70,
                    height: 60
                }, {
                    x: 1130,
                    y: 127,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1130,
                    y: 159,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM11': {
                graphData: [{
                    x: 138,
                    y: 218,
                    width: 70,
                    height: 60
                }, {
                    x: 138,
                    y: 233,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 138,
                    y: 265,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM21': {
                graphData: [{
                    x: 245,
                    y: 218,
                    width: 70,
                    height: 60
                }, {
                    x: 245,
                    y: 233,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 245,
                    y: 265,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM22': {
                graphData: [{
                    x: 191,
                    y: 330,
                    width: 70,
                    height: 60
                }, {
                    x: 191,
                    y: 342,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 191,
                    y: 374,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM31': {
                graphData: [{
                    x: 478,
                    y: 218,
                    width: 70,
                    height: 60
                }, {
                    x: 478,
                    y: 233,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 478,
                    y: 265,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM41': {
                graphData: [{
                    x: 586,
                    y: 218,
                    width: 70,
                    height: 60
                }, {
                    x: 586,
                    y: 233,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 586,
                    y: 265,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM51': {
                graphData: [{
                    x: 1023,
                    y: 218,
                    width: 70,
                    height: 60
                }, {
                    x: 1023,
                    y: 233,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1023,
                    y: 265,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM61': {
                graphData: [{
                    x: 1130,
                    y: 218,
                    width: 70,
                    height: 60
                }, {
                    x: 1130,
                    y: 233,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1130,
                    y: 265,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM42': {
                graphData: [{
                    x: 532,
                    y: 330,
                    width: 70,
                    height: 60
                }, {
                    x: 532,
                    y: 342,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 532,
                    y: 374,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'RM62': {
                graphData: [{
                    x: 1077,
                    y: 330,
                    width: 70,
                    height: 60
                }, {
                    x: 1077,
                    y: 342,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1077,
                    y: 374,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CM01': {
                graphData: [{
                    x: 110,
                    y: 480,
                    width: 70,
                    height: 60
                }, {
                    x: 110,
                    y: 495,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 110,
                    y: 527,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CM02': {
                graphData: [{
                    x: 620,
                    y: 480,
                    width: 70,
                    height: 60
                }, {
                    x: 620,
                    y: 495,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 620,
                    y: 527,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CM03': {
                graphData: [{
                    x: 950,
                    y: 480,
                    width: 70,
                    height: 60
                }, {
                    x: 950,
                    y: 495,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 950,
                    y: 527,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LT01': {
                graphData: [{
                    x: 273,
                    y: 510,
                    width: 70,
                    height: 60
                }, {
                    x: 273,
                    y: 525,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 273,
                    y: 557,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LT02': {
                graphData: [{
                    x: 449,
                    y: 510,
                    width: 70,
                    height: 60
                }, {
                    x: 449,
                    y: 525,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 449,
                    y: 557,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LT03': {
                graphData: [{
                    x: 1130,
                    y: 510,
                    width: 70,
                    height: 60
                }, {
                    x: 1130,
                    y: 525,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1130,
                    y: 557,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LT04': {
                graphData: [{
                    x: 360,
                    y: 373,
                    width: 70,
                    height: 60
                }, {
                    x: 360,
                    y: 388,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 360,
                    y: 420,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'HD01': {
                graphData: [{
                    x: 170,
                    y: 643,
                    width: 70,
                    height: 60
                }, {
                    x: 170,
                    y: 658,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 170,
                    y: 690,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'HD02': {
                graphData: [{
                    x: 554,
                    y: 643,
                    width: 70,
                    height: 60
                }, {
                    x: 554,
                    y: 658,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 554,
                    y: 690,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'HD03': {
                graphData: [{
                    x: 1023,
                    y: 643,
                    width: 70,
                    height: 60
                }, {
                    x: 1023,
                    y: 658,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1023,
                    y: 690,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CI01': {
                graphData: [{
                    x: 230,
                    y: 773,
                    width: 70,
                    height: 60
                }, {
                    x: 230,
                    y: 788,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 230,
                    y: 820,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CI02': {
                graphData: [{
                    x: 478,
                    y: 773,
                    width: 70,
                    height: 60
                }, {
                    x: 478,
                    y: 788,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 478,
                    y: 820,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CI03': {
                graphData: [{
                    x: 1130,
                    y: 773,
                    width: 70,
                    height: 60
                }, {
                    x: 1130,
                    y: 788,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1130,
                    y: 820,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'WLS1': {
                graphData: [{
                    x: 123,
                    y: 773,
                    width: 70,
                    height: 60
                }, {
                    x: 123,
                    y: 788,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 123,
                    y: 820,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'WLS2': {
                graphData: [{
                    x: 586,
                    y: 773,
                    width: 70,
                    height: 60
                }, {
                    x: 586,
                    y: 788,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 586,
                    y: 820,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'WLS3': {
                graphData: [{
                    x: 1023,
                    y: 773,
                    width: 70,
                    height: 60
                }, {
                    x: 1023,
                    y: 788,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1023,
                    y: 820,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LD10': {
                graphData: [{
                    x: 170,
                    y: 883,
                    width: 70,
                    height: 60
                }, {
                    x: 170,
                    y: 898,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 170,
                    y: 930,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LD20': {
                graphData: [{
                    x: 170,
                    y: 1000,
                    width: 70,
                    height: 60
                }, {
                    x: 170,
                    y: 1015,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 170,
                    y: 1047,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LD30': {
                graphData: [{
                    x: 546,
                    y: 1000,
                    width: 70,
                    height: 60
                }, {
                    x: 546,
                    y: 1015,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 546,
                    y: 1047,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LD40': {
                graphData: [{
                    x: 546,
                    y: 883,
                    width: 70,
                    height: 60
                }, {
                    x: 546,
                    y: 898,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 546,
                    y: 930,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LD50': {
                graphData: [{
                    x: 1023,
                    y: 883,
                    width: 70,
                    height: 60
                }, {
                    x: 1023,
                    y: 898,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1023,
                    y: 930,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'LD60': {
                graphData: [{
                    x: 1023,
                    y: 1000,
                    width: 70,
                    height: 60
                }, {
                    x: 1023,
                    y: 1015,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1023,
                    y: 1047,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CT44': {
                name: 'FI01',
                graphData: [{
                    x: 53,
                    y: 1125,
                    width: 70,
                    height: 60
                }, {
                    x: 53,
                    y: 1140,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 53,
                    y: 1172,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CT42': {
                name: 'FI02',
                graphData: [{
                    x: 218,
                    y: 1125,
                    width: 70,
                    height: 60
                }, {
                    x: 218,
                    y: 1140,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 218,
                    y: 1172,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CT41': {
                name: 'FI03',
                graphData: [{
                    x: 502,
                    y: 1125,
                    width: 70,
                    height: 60
                }, {
                    x: 502,
                    y: 1140,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 502,
                    y: 1172,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CT43': {
                name: 'FI04',
                graphData: [{
                    x: 668,
                    y: 1125,
                    width: 70,
                    height: 60
                }, {
                    x: 668,
                    y: 1140,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 668,
                    y: 1172,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CT69': {
                name: 'FI05',
                graphData: [{
                    x: 878,
                    y: 1125,
                    width: 70,
                    height: 60
                }, {
                    x: 878,
                    y: 1140,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 878,
                    y: 1172,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            },
            'CT68': {
                name: 'FI06',
                graphData: [{
                    x: 1044,
                    y: 1125,
                    width: 70,
                    height: 60
                }, {
                    x: 1044,
                    y: 1140,
                    width: 70,
                    attr: {
                        'text-anchor': 'middle'
                    }
                }, {
                    x: 1044,
                    y: 1172,
                    width: 70,
                    attr: {
                        fill: '#f00',
                        'text-anchor': 'middle'
                    }
                }]
            }
        };
    var getTotalVal = function (type, idx) {
        var tv = 0;
        if (totalValDict[type] && totalValDict[type][idx]) {
            tv = totalValDict[type][idx];
        }
        if (idx == 'deviation') {
            if (tv < 0) {
                tv = {
                    text: tv,
                    fill: '#f00'
                }
            }
            else {
                tv = {
                    text: tv,
                    fill: '#0f0'
                }
            }
        }
        return tv;
    };

    var clacTotalVal = function (apiData) {
        totalValDict = {};
        $.each(apiData, function (i, o) {
            if (!totalValDict['day']) {
                totalValDict['day'] = {};
                totalValDict['week'] = {};
            }
            try {
                totalValDict['day']['target'] = (totalValDict['day']['target'] || 0) + parseInt(o[0]['today']);
                totalValDict['day']['current'] = (totalValDict['day']['current'] || 0) + parseInt(o[1]['today']);
                totalValDict['day']['forecast'] = (totalValDict['day']['forecast'] || 0) + parseInt(o[2]['today']);
                totalValDict['day']['planned'] = (totalValDict['day']['planned'] || 0) + parseInt(o[3]['today']);
                totalValDict['day']['deviation'] = (totalValDict['day']['deviation'] || 0) + parseInt(o[4]['today']);
                totalValDict['week']['target'] = (totalValDict['week']['target'] || 0) + parseInt(o[0]['current_week']);
                totalValDict['week']['current'] = (totalValDict['week']['current'] || 0) + parseInt(o[1]['current_week']);
                totalValDict['week']['forecast'] = (totalValDict['week']['forecast'] || 0) + parseInt(o[2]['current_week']);
                totalValDict['week']['planned'] = (totalValDict['week']['planned'] || 0) + parseInt(o[3]['current_week']);
                totalValDict['week']['deviation'] = (totalValDict['week']['deviation'] || 0) + parseInt(o[4]['current_week']);
            }
            catch (e) {
            }
        });
    };

    var redrawGridDynamicContent = function (apiData) {
        var casting_list = ['B38A', 'B38B', 'B48A', 'B48B'],
            type_list = ['today', 'current_week'],
            len = type_list.length,
            idx_list = ['00', '01', '10', '11'];
        clacTotalVal(apiData);
        drawLineRate(true);
        $.each(casting_list, function (i, v) {
            var idx = idx_list[i];
            var svgTable = svgTableDict[idx];
            var rd = apiData[v],
                n = 0;
            for (n; n < len; n++) {
                var tName = type_list[n];
                if (rd[1][tName] > 0 && rd[1][tName] < rd[3][tName]) {
                    var text = rd[1][tName];
                    rd[1][tName] = {
                        fill: '#f00',
                        text: text
                    }
                }
                else {
                    var text = rd[1][tName];
                    rd[1][tName] = {
                        fill: '#0f0',
                        text: text
                    }
                }
                if (rd[2][tName] > 0 && rd[2][tName] < rd[0][tName]) {
                    var text = rd[2][tName];
                    rd[2][tName] = {
                        fill: '#f00',
                        text: text
                    }
                } else {
                    var text = rd[2][tName];
                    rd[2][tName] = {
                        fill: '#0f0',
                        text: text
                    }
                }

                if (rd[4][tName] < 0) {
                    var text = rd[4][tName];
                    rd[4][tName] = {
                        fill: '#f00',
                        text: text
                    }
                } else {
                    var text = rd[4][tName];
                    rd[4][tName] = {
                        fill: '#0f0',
                        text: text
                    }
                }
            }
            svgTable.setRowData(rd);
            svgTable.draw(true);
        });
        var svgTable = svgTableDict['20'],
            rd = [
                {"value": getTotalVal('day', 'target')},
                {"value": getTotalVal('day', 'current')},
                {"value": getTotalVal('day', 'forecast')},
                {"value": getTotalVal('day', 'planned')},
                {"value": getTotalVal('day', 'deviation')}
            ],
            tName = 'value';
        if (rd[1][tName] > 0 && rd[1][tName] < rd[3][tName]) {
            var text = rd[1][tName];
            rd[1][tName] = {
                fill: '#f00',
                text: text
            }
        }
        else {
            var text = rd[1][tName];
            rd[1][tName] = {
                fill: '#0f0',
                text: text
            }
        }
        if (rd[2][tName] > 0 && rd[2][tName] < rd[0][tName]) {
            var text = rd[2][tName];
            rd[2][tName] = {
                fill: '#f00',
                text: text
            }
        } else {
            var text = rd[2][tName];
            rd[2][tName] = {
                fill: '#0f0',
                text: text
            }
        }
        svgTable.setRowData(rd);
        svgTable.draw(true);
        var svgTable = svgTableDict['21'],
            rd = [
                {"value": getTotalVal('week', 'target')},
                {"value": getTotalVal('week', 'current')},
                {"value": getTotalVal('week', 'forecast')},
                {"value": getTotalVal('week', 'planned')},
                {"value": getTotalVal('week', 'deviation')}
            ],
            tName = 'value';
        if (rd[1][tName] > 0 && rd[1][tName] < rd[3][tName]) {
            var text = rd[1][tName];
            rd[1][tName] = {
                fill: '#f00',
                text: text
            }
        }
        else {
            var text = rd[1][tName];
            rd[1][tName] = {
                fill: '#0f0',
                text: text
            }
        }
        if (rd[2][tName] > 0 && rd[2][tName] < rd[0][tName]) {
            var text = rd[2][tName];
            rd[2][tName] = {
                fill: '#f00',
                text: text
            }
        } else {
            var text = rd[2][tName];
            rd[2][tName] = {
                fill: '#0f0',
                text: text
            }
        }
        svgTable.setRowData(rd);
        svgTable.draw(true);
    };

    // 一些不需要经常改变的图形
    var drawLazyGraph = function () {
        $.each(envDict, function (k, v) {
            if (v && v['graphData']) {
                var arr = v['graphData'];
                if (arr && arr.length == 3) {
                    arr[0]['color'] = v.color;
                    arr[0]['product'] = v.name || k;
                    arr[1]['text'] = v['ok'] || 0;
                    arr[2]['text'] = v['nok'] || 0;
                    drawInfoLayer(arr);
                }
            }
        });
    };

    var $progressStrip = $('#progressStrip'),
        progressStripWt = $progressStrip.width(),
        $pBar = $progressStrip.find('.bar'),
        incWt = parseInt((1000 / (loopTimeSpan - 1000)) * progressStripWt * 100) / 100; // 增长百分比

    var initEnvData = function () {
        clearInterval(progressTimeHandle);
        $pBar.removeClass('linear-increase').css('width', '0');
        progressTimeHandle = setInterval(function () {
            if ($pBar.hasClass('linear-increase') === false) {
                $pBar.addClass('linear-increase')
            }
            var curProBarWt = parseInt($pBar.width()),
                newProBarWt = incWt + curProBarWt + 'px';
            $pBar.css('width', newProBarWt);
        }, 1000);
        $.ajax({
            url: '/NEP/ALS/api/rtb2?timestamp=' + Date.now(),
            dataType: 'json',
            success: function (resp) {
                if (resp) {
                    if (resp['akz_dict']) {
                        var midSto = resp['akz_dict'],
                            akzState = resp['akz_state'],
                            manualAreaList = ['CT44', 'CT42', 'CT41', 'CT43', 'CT69', 'CT68'],
                            manualAreaDict = {};
                        $.each(envDict, function (k, v) {
                            v['ok'] = (midSto[k] && midSto[k]['ok']) ? midSto[k]['ok'] : 0;
                            v['nok'] = (midSto[k] && midSto[k]['nok']) ? midSto[k]['nok'] : 0;
                            if (akzState && akzState[k]) {
                                var ste = akzState[k]['state'].toLocaleLowerCase();
                                if (legDict[ste]) {
                                    v['color'] = legDict[ste]['color'];
                                }
                            }
                            if ($.inArray(k, manualAreaList) >= 0) {
                                manualAreaDict[k] = v['ok']; // 手动区域的值
                            }
                        });

                        var lastUpdateManualStateTimeStamp = store.get('lastUpdateManualStateTimeStamp'),
                            oldManualAreaDict = store.get('manualAreaDict'),
                            nowTimeStamp = Date.now();
                        if (oldManualAreaDict === undefined) {
                            store.set('lastUpdateManualStateTimeStamp', Date.now());
                            store.set('manualAreaDict', manualAreaDict);
                        }
                        else if ($.isPlainObject(oldManualAreaDict)) {
                            $.each(manualAreaDict, function (k, v) {
                                if (v > oldManualAreaDict[k]) {
                                    envDict[k]['color'] = legDict['production']['color'];
                                }
                                else {
                                    envDict[k]['color'] = legDict['production end']['color']
                                }
                            });
                            if (nowTimeStamp - lastUpdateManualStateTimeStamp >= 600000) {
                                store.set('lastUpdateManualStateTimeStamp', Date.now());
                                store.set('manualAreaDict', manualAreaDict);
                            }
                        }
                        drawLazyGraph();
                    }
                    if (resp['rtb2_data']) {
                        //var grid_data_dict = {};
                        //$.each(resp['api_data'], function (k, v) {
                        //    grid_data_dict[v.Type] = v;
                        //});
                        //$.each(grid_data_arr, function (k, v) {
                        //    $.extend(v, grid_data_dict[v.name])
                        //});
                        redrawGridDynamicContent(resp['rtb2_data']);
                    }
                }
            }
        });
    };

    $(function () {
        showClock();
        initLayout();
    });

    var getImgSize = function (url, callFn) {
        $('<img/>').attr('src', url).load(function () {
            callFn.call(this);
        });
    };

    var initLayout = function () {
        paper = Raphael('stage', winWt, winHt);
        var titleBarHt = midObj.titleBarHt = 30;
        getImgSize(pImg, function () {
            var img = this,
                imgWt = midObj.imgWt = img.width,
                imgHt = midObj.imgHt = img.height;
            var scaleImgHt = midObj.scaleImgHt = winHt - titleBarHt,
                imgWHScale = midObj.imgWHScale = imgWt / imgHt,
                scaleImgWt = midObj.scaleImgWt = parseInt(scaleImgHt * imgWHScale);
            midObj.imgObj = paper.image(pImg, legendWt, titleBarHt, scaleImgWt, scaleImgHt);
            drawTitle();
            calcBoardSize();
            drawLegend();
        });
    };

    var calcBoardSize = function () {
        midObj.boardXAxis = midObj.scaleImgWt + legendWt; // board 起始x坐标
        midObj.boardYAxis = midObj.titleBarHt; // board 起始y坐标

        midObj.lineRateHt = 60;

        midObj.boardWt = winWt - midObj.boardXAxis;
        midObj.boardHt = winHt - midObj.titleBarHt - midObj.lineRateHt;

        midObj.boardGrid = [];
        midObj.boardGapWt = calcScaleSize(mq['gapWidth']);
        midObj.boardGapHt = calcScaleSize(mq['gapHeight']);
        midObj.boardGridItemWt = parseInt((midObj.boardWt - (gridColNum - 1) * midObj.boardGapWt) / gridColNum);
        midObj.boardGridItemHt = parseInt((midObj.boardHt - (gridRowNum - 1) * midObj.boardGapHt) / gridRowNum);
        var i = 0;
        for (i; i < gridRowNum; i++) {
            var j = 0;
            for (j; j < gridColNum; j++) {
                drawGrid(i, j);
            }
        }
        drawLineRate();
    };

    var drawLineRate = function (redraw) {
        if (redraw) {
            var date = new Date(),
                y = date.getFullYear(),
                m = date.getMonth() + 1,
                d = date.getDate(),
                paddingNum = function (n) {
                    if (n < 10) {
                        n = '0' + n;
                    }
                    return n;
                };
            var ds = y + '/' + paddingNum(m) + '/' + paddingNum(d) + ' 06:00:00',
                ts = (new Date(ds)).getTime() / 1000,
                nts = parseInt((new Date()).getTime() / 1000),
                nh = parseInt((nts - ts) / 360) / 10,
                rate = nh != 0 ? parseInt(totalValDict['day']['current'] * 100 / nh) / 100 : 0;
            lineRateCache['text'].attr({
                text: 'Current line rate = ' + rate + ' U/H'
            });
        }
        else {
            var x = midObj.boardXAxis,
                y = midObj.boardYAxis + 3 * (midObj.boardGridItemHt + midObj.boardGapHt),
                wt = midObj.boardWt,
                ht = midObj.lineRateHt - midObj.boardGapHt;
            paper.rect(x, y, wt, ht).attr({fill: '#000', 'stroke-width': 0, 'stroke': '#000'});
            lineRateCache['text'] = paper.text(x + 12, y + 24, 'Current line rate = Loading...').attr({
                'text-anchor': 'start',
                'font-size': mq['fontSize'],
                'font-weight': 900,
                'fill': '#0f0'
            });
        }
    };

    var drawGrid = function (rn, cn) {
        var gx = midObj.boardXAxis + cn * (midObj.boardGridItemWt + midObj.boardGapWt),
            gy = midObj.boardYAxis + rn * (midObj.boardGridItemHt + midObj.boardGapHt),
            castingList = ['B38A', 'B38B', 'B48A', 'B48B'];
        //castingList = ['B38A', 'Total Day', 'B38B', null, 'B48A', 'Total Week', 'B48B', null];
        if (rn < 2) {
            var ops = {
                x: gx,
                y: gy,
                width: midObj.boardGridItemWt,
                height: midObj.boardGridItemHt,
                r: 0,
                bgColor: '#000',
                rowNum: 6,
                colNum: 3,
                fontSize: mq['fontSize'],
                columns: [
                    {"data": "casting_name", "text": castingList[2 * rn + cn], "align": "end", bgColor: '#000', width: mq['devWidth']},
                    {"data": "today", "text": "Today", "align": "middle", bgColor: '#000'},
                    {"data": "current_week", "text": mq['currentWeek'], "align": "middle", bgColor: '#000', width: 125}
                ]
            };
            var idx = rn + '' + cn;
            var svgTable = new SVGTable(ops, paper);
            svgTableDict[idx] = svgTable;
            svgTable.setRowData([
                {"casting_name": "Target", "today": {text: '-', fontSize: mq['numFtSize']}, "current_week": {text: '-', fontSize: mq['numFtSize']}},
                {"casting_name": "Current", "today": {text: '-', fontSize: mq['numFtSize']}, "current_week": {text: '-', fontSize: mq['numFtSize']}},
                {"casting_name": "Forecast", "today": {text: '-', fontSize: mq['numFtSize']}, "current_week": {text: '-', fontSize: mq['numFtSize']}},
                {"casting_name": "Planned", "today": {text: '-', fontSize: mq['numFtSize']}, "current_week": {text: '-', fontSize: mq['numFtSize']}},
                {"casting_name": "Deviation", "today": {text: '-', fontSize: mq['numFtSize']}, "current_week": {text: '-', fontSize: mq['numFtSize']}}
            ]);
            svgTable.draw();
        }
        else if (rn == 2) {
            var co = [{
                columns: [
                    {"data": "field", "text": "Total Day", "align": "middle", colspan: 2, width: mq['gridWidth'], bgColor: '#000'},
                    {"data": "value", "align": "middle", bgColor: '#000'}
                ]
            }, {
                columns: [
                    {"data": "field", "text": "Total Week", "align": "middle", colspan: 2, width: mq['gridWidth'], bgColor: '#000'},
                    {"data": "value", "align": "middle", bgColor: '#000'}
                ]
            }];
            var ops = {
                x: gx,
                y: gy,
                width: midObj.boardGridItemWt,
                height: midObj.boardGridItemHt,
                r: 0,
                bgColor: '#000',
                rowNum: 6,
                colNum: 2,
                fontSize: mq['fontSize']
            };
            if (co[cn]) {
                $.extend(ops, co[cn]);
            }
            var idx = rn + '' + cn;
            var svgTable = new SVGTable(ops, paper);
            svgTable.setRowData([
                {"field": {text: "Target Sum", align: "end"}, "value": {text: '-', fontSize: mq['numFtSize']}},
                {"field": {text: "Current Sum", align: "end"}, "value": {text: '-', fontSize: mq['numFtSize']}},
                {"field": {text: "Forecast Sum", align: "end"}, "value": {text: '-', fontSize: mq['numFtSize']}},
                {"field": {text: "Planned Sum", align: "end"}, "value": {text: '-', fontSize: mq['numFtSize']}},
                {"field": {text: "Deviation Sum", align: "end"}, "value": {text: '-', fontSize: mq['numFtSize']}}
            ]);
            svgTableDict[idx] = svgTable;
            svgTable.draw();
        }
    };

    var drawTitle = function () {
        var titBar = paper.rect(0, 0, winWt, midObj.titleBarHt);
        titBar.attr({
            'fill': '#0070c0',
            'stroke-width': 0
        });

        paper.text(12, 15, 'Foundry RTB2 Area').attr({
            'text-anchor': 'start',
            'font-size': 20,
            'font-weight': 900,
            'fill': '#fff'
        });

        midObj.imgZoomScale = midObj.scaleImgWt / midObj.imgWt;

        initEnvData();
        timeHandle = setInterval(function () {
            initEnvData();
        }, loopTimeSpan);
    };

    var calcScaleSize = function (val) {
        var newVal = parseInt(val * midObj.imgZoomScale * 100) / 100;
        if (window.devicePixelRatio) {
            newVal = newVal * window.devicePixelRatio;
        }
        return newVal;
    };

    var clrRectWt,
        pdRectHt;
    // 画左侧LP11-LP33数据
    var drawInfoLayer = function (layerData) {
        if ($.isArray(layerData)) {
            $.each(layerData, function (idx, obj) {
                drawInfoLayer(obj);
            });
        }
        else if ($.isPlainObject(layerData) && layerData.x != undefined && layerData.y != undefined) {
            if (layerData.lock === undefined) {
                layerData.x = calcScaleSize(layerData.x + 30) + legendWt;
                layerData.y = calcScaleSize(layerData.y) + midObj.titleBarHt;
                layerData.width = calcScaleSize(layerData.width);
                layerData.height = calcScaleSize(layerData.height);
            }
            if (layerData.text != undefined) {
                var opt = {
                    'text-anchor': 'start',
                    'font-size': 16,
                    'font-weight': 100,
                    'fill': '#fff'
                };
                if (layerData.lock === undefined) {
                    if (opt['text-anchor'] && layerData.width) {
                        layerData.x += 0.5 * layerData.width;
                    }
                }
                if (layerData.attr) {
                    $.extend(opt, layerData.attr);
                }
                if (layerData['handle']) {
                    layerData['handle'].attr('text', layerData.text);
                }
                else {
                    layerData['handle'] = paper.text(layerData.x, layerData.y, layerData.text).attr(opt);
                }
                layerData.lock = 1;
            }
            else if (layerData.width != undefined && layerData.height != undefined && layerData.lock === undefined) {
                var opt = {
                    'fill': '#333'
                };
                if (layerData.attr) {
                    $.extend(opt, layerData.attr);
                }

                paper.rect(layerData.x, layerData.y, layerData.width, layerData.height).attr(opt);

                clrRectWt = calcScaleSize(30);
                pdRectHt = calcScaleSize(40);
                layerData['color_handle'] = paper.rect(layerData.x - clrRectWt, layerData.y, clrRectWt, layerData.height).attr({
                    fill: layerData.color || '#fff'
                });

                paper.rect(layerData.x - clrRectWt, layerData.y - pdRectHt, (clrRectWt + layerData.width), pdRectHt).attr({
                    fill: '#fff'
                });

                layerData['product_handle'] = paper.text(layerData.x - clrRectWt + (clrRectWt + layerData.width) * 0.5, layerData.y - pdRectHt + pdRectHt * 0.5, '-').attr({
                    'text-anchor': 'middle',
                    fill: '#000',
                    'font-weight': 'bold'
                });

                var yAxis = layerData.y + layerData.height * 0.5;
                var pathString = 'M' + (layerData.x) + ' ' + yAxis + 'L' + (layerData.x + layerData.width) + ' ' + yAxis;

                paper.path(pathString).attr({
                    stroke: '#00ff00',
                    'stroke-width': 1
                });
                layerData.lock = 1;
            }
            if (layerData['color_handle'] && layerData.color) {
                layerData['color_handle'].attr('fill', layerData.color);
            }
            if (layerData['product_handle'] && layerData.product) {
                layerData['product_handle'].attr('text', layerData.product);
            }
        }
    };

    var drawLegend = function () {
        var rx = 5,
            ry = midObj.titleBarHt,
            wt = 30,
            ht = 30,
            itemHt = 60;

        wt = calcScaleSize(wt);
        ht = calcScaleSize(ht);
        var cnt = 0;
        $.each(legDict, function (k, v) {
            var x = calcScaleSize(rx + 8),
                y = calcScaleSize(ry + cnt * itemHt + 8) + midObj.titleBarHt;

            paper.rect(x, y, wt, ht).attr({
                fill: v.color
            });

            x += wt + calcScaleSize(8);
            y += calcScaleSize(7);
            if (v.text) {
                paper.text(x, y - 3, v.text[0]).attr({
                    'text-anchor': 'start',
                    'font-size': '12',
                    'font-weight': '200'
                });
                paper.text(x, y + 10, v.text[1]).attr({
                    'text-anchor': 'start',
                    'font-size': '12',
                    'font-weight': '200'
                });
            }
            else {
                paper.text(x, y + 4, k).attr({
                    'text-anchor': 'start',
                    'font-size': '12',
                    'font-weight': '200'
                });
            }
            cnt++;
        })
    };

    var showClock = function () {
        $('#neverClock').timeTo({
            fontSize: 18,
            theme: 'black'
        });
    }
})();